<template>
  <div class="go-project">
    <n-layout has-sider position="absolute">
      <n-space vertical>
        <project-layout-sider></project-layout-sider>
      </n-space>
      <n-layout>
        <layout-header-pro></layout-header-pro>
        <n-layout
          id="go-project-content-top"
          class="content-top"
          position="absolute"
          :native-scrollbar="false"
        >
          <n-layout-content>
            <layout-transition-main>
              <router-view></router-view>
            </layout-transition-main>
          </n-layout-content>
        </n-layout>
      </n-layout>
      <LayoutContact @toggle-contact-form="toggleContactForm"/>
      <ContactForm :src="iframeSrc" v-if="showContactForm" />
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { ProjectLayoutSider } from './layout/components/ProjectLayoutSider'
import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
import { LayoutTransitionMain } from '@/layout/components/LayoutTransitionMain/index'
import { LayoutContact } from '@/layout/components/LayoutContact/index'
import { ContactForm } from '@/layout/components/ContactForm/index'
import { ref } from 'vue'

// 定义一个响应式变量来控制 ContactForm 组件的显示和隐藏
const showContactForm = ref(false);
const iframeSrc = ref('https://beta-cckf.coocaa.com/chat/pc/v2/index.html?sysnum=3ed5d78711b44527ae6014de34f84966&channelid=27&partnerid=1585826608273424384&uname=王泽中&source=0');
// 处理子组件传递的事件，反转布尔值
const toggleContactForm = () => {
  showContactForm.value = !showContactForm.value;
};
</script>

<style lang="scss" scoped>
@include go(project) {
  .content-top {
    top: $--header-height;
    margin-top: 1px;
  }
}
</style>
